<template>
  <div class="bottom-box">
    <div class="general-flex-center left-box">
      <img :src="url" class="img" />
    </div>
    <div class="right-box">
      <div class="right-header">
        <el-button text class="general-btn-action control-button" style="margin-left: 0 !important;"
          @click="getPrevTimeData">前一时间</el-button>
        <el-button text class="general-btn-action control-button" @click="getCurrentData">当前时间</el-button>
        <el-button text class="general-btn-action control-button" @click="getNextTimeData">后一时间</el-button>
      </div>
      <el-table :data="tableData"
        style="flex:1;--el-table-border-color: none;overflow-y: auto;background-color: #192E37;"
        :row-class-name="getClassName" :header-cell-style="customHeaderCell" :cell-style="customCell">
        <el-table-column prop="evaluation" label="评估项" />
        <el-table-column prop="evaluateVal" label="评估值" width="250" />
        <el-table-column prop="timeStage" label="时间段" width="180" />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import type { ImageProps } from 'element-plus'
import axios from "axios";
import { BASE_URL } from '@/utils/common.js'
import elTableMixin from '@/utils/elTableMixin.js'

const { customHeaderCell, customCell, getClassName } = elTableMixin();

const fits = [
  'fill'

] as ImageProps['fit'][]

const url = ref(BASE_URL + '/getEnergyImg');

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

onMounted(
  async () => {
    getPrevTimeData()
  }
)

const getPrevTimeData = async () => {
  let url = BASE_URL + '/getOptimizeOnes?timeStage=前一时间'
  const response = await axios.get(url);
  tableData.value = response.data
}

const getCurrentData = async () => {
  let url = BASE_URL + '/getOptimizeOnes?timeStage=当前时间'
  const response = await axios.get(url);
  tableData.value = response.data
}

const getNextTimeData = async () => {
  let url = BASE_URL + '/getOptimizeOnes?timeStage=后一时间'
  const response = await axios.get(url);
  tableData.value = response.data
}


</script>

<style scoped lang="scss">
.bottom-box {
  flex: 1;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  // margin: 20px 0;
  // padding: 0 16px;

  .left-box {
    flex: 1;
    flex-shrink: 0;

    .img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .right-box {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;

    .right-header {
      display: flex;

      .control-button {
        padding: computeVh(26) computeVw(30) !important;
        border-radius: 6px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-width: 0 !important;
        margin-left: computeVw(18) !important;
        font-size: computeVw(16) !important;

      }
    }
  }
}
</style>